<template>
  <div class="">
    <el-dialog :title="title" v-model="openPersonSelect" width="50%" append-to-body>
      <el-table v-loading="loadingPersonSelect" :data="personList"
                highlight-current-row max-height="69vh"
                @current-change="selectPerson">
        <el-table-column type="index"/>
        <el-table-column label="店员用户名" prop="userName"/>
        <el-table-column label="用户昵称" prop="nickName"/>
        <el-table-column label="手机号" prop="phonenumber"/>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="selectPersonOK">确　定</el-button>
          <el-button @click="cancelPersonSelect">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PersonSelect">

import {personByClob} from "@/api/store/countList";

const {proxy} = getCurrentInstance();

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: () => "选择人员"
  }
});
const personList = ref([]);
const openPersonSelect = ref(false);
const loadingPersonSelect = ref(true);
const selectedPerson = ref(null);

const personParam = ref({
  nickName: "",
  userName: "",
});

const emits = defineEmits(['onConfirm']);

function goGetPerson() {
  personList.value = [];
  selectedPerson.value = null;
  openPersonSelect.value = true;
  personByClob(personParam.value).then(res => {
    personList.value = res.data;
    loadingPersonSelect.value = false;
  });
}

function selectPerson(row) {
  selectedPerson.value = row;
}

function selectPersonOK() {
  if (selectedPerson.value == null) {
    proxy.$modal.msgError("请先选择人员！");
    return;
  }
  emits('onConfirm', selectedPerson.value);
  openPersonSelect.value = false;
}

function cancelPersonSelect() {
  openPersonSelect.value = false;
}

defineExpose({goGetPerson});
</script>

<style scoped>

</style>